<template>
	<div class="login-container flx-center">
		<div class="login-box">
			<div class="login-left">
				<img src="@/assets/images/login_left0.png" alt="login" />
			</div>
			<div class="login-form">
				<div class="login-logo">
					<img class="login-icon" src="@/assets/images/logo.svg" alt="" />
					<p class="logo-text">Quan-Admin</p>
				</div>
				<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
							<template #prefix>
								<el-icon class="el-input__icon">
									<user />
								</el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							type="password"
							v-model="loginForm.password"
							placeholder="密码：123456"
							show-password
							autocomplete="new-password"
						>
							<template #prefix>
								<el-icon class="el-input__icon">
									<lock />
								</el-icon>
							</template>
						</el-input>
					</el-form-item>
				</el-form>
				<div class="login-btn">
					<el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>
					<el-button :icon="UserFilled" round @click="submitForm(loginFormRef)" size="large" type="primary" :loading="loading">
						登录
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="login">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store";
import { Login } from "@/api/login/index";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import { HOME_URL } from "@/config/config";

const router = useRouter();
const globalStore = useGlobalStore();

const loading = ref<boolean>(false);

// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

// 登录表单数据
const loginForm = reactive<Login.ReqLoginForm>({
	username: "admin",
	password: "123456"
});

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async valid => {
		if (valid) {
			loading.value = true;
			try {
				const requestLoginForm: Login.ReqLoginForm = {
					username: loginForm.username,
					password: loginForm.password
				};
				const res = await new Promise(resolve => {
					resolve(requestLoginForm);
				});
				console.log(res);
				// * 存储 token
				globalStore.setToken("12345678");
				ElMessage.success("登录成功！");
				router.push({ path: HOME_URL });
			} finally {
				loading.value = false;
			}
		}
	});
};

onMounted(() => {
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === "Enter" || e.code === "enter") {
			if (loading.value) return;
			submitForm(loginFormRef.value);
		}
	};
});

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
